<template>
  <NFlex align="center" class="nv-actionbar">
    <slot name="actionbar_pre" :size="props.size" />

    <NvButton
      v-if="resolveVisible(actionbar?.addBtn, true)"
      type="primary"
      :content="t.button.add"
      :size="props.size"
      :default-render-icon="() => h(Add24Filled)"
      v-bind="resolveBind(actionbar?.addBtn)"
      @click="emits('add')"
    />

    <slot name="actionbar" :size="props.size" />
  </NFlex>
</template>

<script setup lang="ts">
import type { NvActionbarOption } from '@/crud/types'
import type { Size } from '@/types'
import { Add24Filled } from '@vicons/fluent'
import { NFlex } from 'naive-ui'
import { computed, h } from 'vue'
import { NvButton } from '@/components'
import { resolveBind, resolveVisible } from '@/utils'
import { useLocale } from '@/utils/locale'

interface Props {
  size: Size
  option?: NvActionbarOption | boolean
}
interface Emits {
  (e: 'add'): void
}
const props = defineProps<Props>()
const emits = defineEmits<Emits>()

const actionbar = computed(() => {
  return typeof props.option === 'object' ? props.option : undefined
})

const t = useLocale()
</script>
